<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style type="text/css">
			
			.mui-card{
				padding:  5px 5px;
			}
			
			.mui-media .mui-card .mui-card-content img{
				width: 100%;
			}
			.mui-card-footer p{
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.mui-card-footer .mui-pull-left{
				color: red;
			}
			
			
		</style>
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron mui-grid-view" id="parentNode" sort="sales" value="0" ms-controller="goodlist">
					<li ms-for="el in @goodsData" ms-attr="{id:el.id}" class="mui-table-view-cell mui-media mui-col-xs-6">
						<div class="mui-card">
							<div class="mui-card-content">
								<img ms-attr="{src:@imgPath+el.thumb}" />
							</div>
							<div class="mui-card-footer">
								<p style="color:red;">{{el.title}}</p>
								<p>
									<span class="mui-pull-left">{{el.marketprice}}</span>
									<span class="mui-pull-right" style="text-decoration: line-through;">{{el.productprice}}</span>
								</p>
								<p>
									<span class="mui-pull-left">销量: {{el.total}}</span>
								</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div> 
		</body>
		<script src="../js/avalon.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/config.js"></script>
		<script>
			mui.init({
				gestureConfig:{
					swipe:true
				},
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						contentrefresh:'玩儿命加载中...',
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			//设置浏览器最小高度为视口高度
			document.getElementsByClassName('mui-table-view')[0].style.minHeight = document.getElementsByClassName('mui-content')[0].clientHeight+'px';
			
			
			
			var ws = null,wo  = null;
			if(window.plus){
				plusReady();
			}else{
				document.addEventListener('plusready',plusReady,false);
			}
			//初始化加载
			function plusReady(){
				ws = plus.webview.currentWebview();
				wo = ws.opener();
				
				cid = ws.cateid;
				api = ws.api;
				
				//判断是否有缓存
				var cate_goods =  plus.storage.getItem('cate_goods');
				if(cate_goods){
					
					
				}else{
					getData(cid,0,api,'sales',0);
				}
			}
			
			/**
			 * avalon来了
			 * 创建vm 对象
			 */
			var cate = avalon.define({
				$id:"goodlist",
				imgPath:'',
				goodsData:[]
			});
			
			cate.imgPath = ipconfig().jpg;
			
			/**
			 * 商品点击事件
			 */
			mui('#parentNode').on('tap','li',function(){
				//webview style
				//创建新窗口
				var webId = 'goodDetail'+this.getAttribute('id')+'.html';
				
				var newg = plus.webview.create('goodDetail.html',webId,{},{num:this.getAttribute('id'),openerid:ws.id});
				plus.nativeUI.showWaiting('加载中...');
				/*newg.addEventListener('loaded',function(){
					plus.nativeUI.closeWaiting();
				});*/
			});	
			
			
			
			/**
			 * ajax获取数据
			 * @param {int} cid 分类id 必填
			 * @param {int} count 查询数据偏移量 仅用于上拉加载
			 * @param {String} API 调用的接口名称
			 * @param {String} sortType 排序方式
			 * @param {int} sortAD 排序类型 升序降序 0为降序 1为升序
			 */
			
			var getData = function(cid,count,API,sortType,sortAD){
				//请求ajax
				if(API == 'CateGoods.getAllGoods'){
					cid = null;
				}
				mui.ajax(ipconfig().ip+API,{
					data:{cid:cid,count:count,sort_type:sortType,sort_ad:sortAD},
					dataType:'json',
					timeout:10000,
					type:'get',
					headers:{'Content-Type':'application/json'},
					success:function(data){
						if(data.data.code == 0){
							cate.goodsData = data.data.data;
						}else{
							alert('阿哦，错了');
							mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
						}
					},
					error:function(xhr,type,errorThrow){
						console.log(errorThrow);
						mui('#pullrefresh').pullRefresh().endPullupToRefresh();
					}
				});
			};
			
			
			
			
			
				/**
				 * 下拉刷新具体业务实现
				 */
				function pulldownRefresh() {
					var sortType = document.getElementById('parentNode').getAttribute('sort');
					var sortAD = document.getElementById('parentNode').value;
					var count = 0;
					setTimeout(function(){
						var api = 'CateGoods.getGoodsData';
						getData(cid,count,api,sortType,sortAD);
					},1500);
				}
				/**
				 * 上拉加载具体业务实现
				 */
				var count = 10;
				function pullupRefresh() {
					
					setTimeout(function() {
						count = count+1;
						getData(cid,count,'CateGoods.addGoodsData');	
					}, 1500);
				}
				if (mui.os.plus) {
					mui.plusReady(function() {
						setTimeout(function() {
	//						mui('#pullrefresh').pullRefresh().pullupLoading();
						}, 1000);
	
					});
				} else {
					mui.ready(function() {
	//					mui('#pullrefresh').pullRefresh().pullupLoading();
					});
				}
        </script>
	

</html>